{extend name="@list:list" /}

{block name="style"}
<style>
    .layui-tab-title .fa {
        cursor: pointer;
        position: absolute;
        right: 5px;
        top: 3px;
    }

    .layui-tab-title .fa:hover {
        color: red;
    }
</style>
{/block}

{block name="body"}

<div class="layui-tab" lay-filter="parents">
    <ul class="layui-tab-title">
        {foreach $parents as $parent}
        <li data-parent_id="{$parent.id}" data-id="{$parent.id}" class="{if $parent['id']==$parent_id}layui-this{/if}">
            {$parent.mark}
            <i class="fa fa-times" aria-hidden="true" onclick="delParent('{$parent.id}')"></i>
        </li>
        {/foreach}
    </ul>
</div>

{if isset($table)}
<table class="layui-table layui-form" lay-skin="nob">

    <!-- 表头 -->
    <thead>
    <tr>
        {foreach $table->getHeader() as $label }
        <th>{$label}</th>
        {/foreach}

        <!-- 操作 -->
        {if $table->getActions() }
        <th>操作</th>
        {/if}
    </tr>
    </thead>

    <!-- 主体 -->
    {foreach $table as $index=>$row }
    <tbody>
    <tr data-id="{$row->getRowId()}">
        {foreach $row as $rowIndex=>$td }
        <td class="align-middle text-sm text-gray-600">{$td}</td>
        {/foreach}

        <!-- 操作 -->
        {if $row->getActions() }
        <td>
            {$row->getActions()}
        </td>
        {/if}
    </tr>
    </tbody>
    {/foreach}
</table>
{/if}

{/block}


{block name="body_script"}
<script>

    var $, layer;

    function delParent(id) {

        layer.confirm('所有子配置都会被删除,确认吗?', function () {
            $.get(`{:url("del_parent")}`, {id: id}, (res) => {
                if (res.code) {
                    layer.msg('操作成功', {icon: 1});
                    window.location.reload();
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            })
        })
        let event = window.event ;
        event.stopPropagation();
        return false;
    }

    layui.use(['element', 'layer', 'jquery'], function () {
        let element = layui.element;
        layer = layui.layer;
        $ = layui.jquery;

        // 监听顶级分类切换
        element.on('tab(parents)', function (data) {
            let parent_id = this.dataset.parent_id;
            if (parseInt(parent_id) !== parseInt('{$parent_id}')) {
                window.location.href = '?parent_id=' + parent_id;
            }

        });

    });

</script>
{/block}





